import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: const Text('这是按钮页面')),
      body: const Column(
        children: [MyText(), Myimage(), MyclipImage()],
      ),
    ),
  ));
}

class MyText extends StatelessWidget {
  const MyText({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 200,
        height: 200,
        decoration: const BoxDecoration(
          color: Colors.white12,
        ),
        // 加载远程图片
        child: Image.network(
          'https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLDEYWBo9eGlSzicLOsiaewkzPicaPtpIVtvUKekSF6icdxLRb4bBImYzcPEQFaRFVaBTFjibO5WIN9PVg/132',
          alignment: Alignment.center,
          // 铺满容器，不变形
          // fit: BoxFit.cover,
          // repeat: ImageRepeat.repeat,
        ),
      ),
    );
  }
}

// 通过container实现一个圆形的图片
class Myimage extends StatelessWidget {
  const Myimage({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      width: 100,
      height: 100,
      margin: const EdgeInsets.fromLTRB(10, 10, 10, 10),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(50),
          color: Colors.yellow,
          // 设置背景图
          image: const DecorationImage(
              image: NetworkImage(
                'https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLDEYWBo9eGlSzicLOsiaewkzPicaPtpIVtvUKekSF6icdxLRb4bBImYzcPEQFaRFVaBTFjibO5WIN9PVg/132',
              ),
              fit: BoxFit.cover)),
    );
  }
}

// 使用clipOval
class MyclipImage extends StatelessWidget {
  const MyclipImage({super.key});

  @override
  Widget build(BuildContext context) {
    return ClipOval(
      child: Image.network(
        'https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLDEYWBo9eGlSzicLOsiaewkzPicaPtpIVtvUKekSF6icdxLRb4bBImYzcPEQFaRFVaBTFjibO5WIN9PVg/132',
        width: 100,
        height: 100,
      ),
    );
  }
}

// 本地图片 Image.assets
// 需要修改pubspec.yaml文件的image属性，配置图片目录
// assets:
// - images/qrcode.jpg
// - images/img/default.png
// - images/img/over.jpg
// class LocalImg extends StatelessWidget {
//   const LocalImg({super.key});

//   @override
//   Widget build(BuildContext context) {
//     return Container(
//       width: 200,
//       height: 200,
//       decoration: const BoxDecoration(
//         color: Colors.blue,
//       ),
//       child: Image.asset('images/img/over.jpg'),
//     );
//   }
// }
